<template>
  <div class="situation-statistics">
    <nanning-screen-border-box :bgImg="bgImg">
      <screen-title>态势统计</screen-title>
      <div class="situation-statistics-content">
        <div class="statistics">
          <div class="statistics-content">
            <div class="num">{{totalNum | formatNumber}}</div>
            <div class="tip">警务力量</div>
          </div>
        </div>
        <div class="title">类别占比</div>
        <div class="type-percent">
          <screen-chart @initCb="typePercentChartInit"></screen-chart>
        </div>
      </div>
    </nanning-screen-border-box>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { numAnimation } from 'utils/common'
import { getFlowChartOption } from './optiuon'
import { getPoliceTotalPer } from 'api/situationAwareness/serviceForce/screenCenter'
@Component({
  name: 'situation-statistics'
})
export default class SituationStatistics extends Vue {
  private bgImg: string = require('assets/images/situational-awareness/keyunzhan.png')

  private totalNum = 0

  private flowList: any = []

  // 饼图初始化回调
  typePercentChartInit(chart: any) {
    chart.clear()
    this.getPoliceTotalPer(chart)
  }

  // 获取 统计数据 和 类别占比
  getPoliceTotalPer (chart: any) {
    const params = {
      dzcode: ''
    }
    getPoliceTotalPer(params).then(res => {
      console.log('获取勤务力量统计数据', res)
      const { total, typeList } = res.data
      numAnimation(this.totalNum, parseInt(total), this, 'totalNum')
      typeList.forEach((item: any) => {
        this.flowList.push({ value: parseInt(item.typeTotal), name: item.typeName })
      })
      setTimeout(() => {
        chart.setOption(getFlowChartOption({ data: this.flowList }))
      }, 300)
    }).catch(err => {
      console.error('获取勤务力量统计数据', err)
    })
  }
}
</script>

<style lang="scss" scoped>
.situation-statistics {
  width: 100%;
  height: 59.66%;
  &-content {
    width: 100%;
    height: calc(100% - 50px);
    .statistics {
      width: 100%;
      height: calc(50% - 38px);
      box-sizing: border-box;
      padding: 0 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      &-content {
        width: 442px;
        height: 134px;
        background: url('../../../../../assets/images/situational-awareness/coach-bus-way-total-bg.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        padding-left: 185px;
        .num {
          font-size: 30px;
          line-height: 42px;
          font-family: 'PingFang Regular';
          font-weight: bold;
          color: #ffffff;
        }
        .tip {
          font-size: 14px;
          line-height: 26px;
          font-family: 'PingFang Regular';
          font-weight: 400;
          color: #ffffff;
          opacity: 0.76;
        }
      }
    }
    .title {
      width: 100%;
      height: 38px;
      font-size: 18px;
      font-family: 'PingFang Regular';
      color: #fff;
      line-height: 38px;
      text-indent: 16px;
      position: relative;
      box-sizing: border-box;
      padding: 0 18px;
      &::before {
        content: '';
        position: absolute;
        left: 18px;
        top: 14px;
        width: 10px;
        height: 10px;
        background: #23fffc;
        border-radius: 50%;
      }
    }
    .type-percent {
      width: 100%;
      height: 50%;
    }
  }
}
</style>
